<template>
  <view class="order_wrap">
    <!--menuTabs菜单-->
    <view ref="menuBox" class="menu_box">
      <view v-for="(item,index) in menuTabs" :key="index" :class="menuCurrent===item.id ? 'menu_list menu_list_active' : 'menu_list'" @click="clickMenu(item.id)">
        <view v-if="item.active==true" style="color:#FF7900">{{ item.name }}</view>
        <view v-else>{{ item.name }}</view>
        <view v-if="item.id===2" style="display: flex;position: relative;padding-left: 6rpx;">
          <image :src="imgurlBwc + '/reward/gold.gif'" mode="widthFix" style="width: 48rpx;height: 48rpx;"></image>
        </view>
        <view v-if="item.id===3" style="display: flex;position: relative;padding-left: 6rpx;">
          <text class="iconfont sanJiaoXing"></text>
          <text class="iconfont icon-arrow-right">试吃官</text>
        </view>
      </view>
    </view>
    <!--探店订单内容-->
    <view class="order_box">
      <TDOrder ref="childRef"
          :menuCurrent="menuCurrent"
          :tdsCurrent="tdsCurrent"
          :typs="typs"
          :source="packSource"
          :pageSource="currentPage"
      />
    </view>
  </view>
</template>

<script>
import TDOrder from "@/components/orders/TD-Order.vue";
const app = getApp();
export default {
  components: {
    TDOrder,
  },
  data() {
    return {
      imgurlBwc: app.globalData.imgurlBwc,
      // menuTabs菜单
      menuTabs: [
        {
          name: '探店订单',
          id: '1',
          active: true,
        },
        {
          name: '赏金订单',
          id: 2,
          active: false
        },
        {
          name: '外卖返现订单',
          id: 3,
          active: false
        }
      ],
      menuCurrent: 1, // menu菜单索引
      menuHeight: 0, // menu菜单高度
      ops:'',// 跳转页面参数
      typs: 'all',//all全部
      currentPage: 1, // 默认页码
      tdsCurrent: 0, // 探店菜单索引
      packSource: 'packOrder',
    }
  },
  onLoad(ops) {
    console.log('ops', ops)
    let that = this
    //  出现“当前店铺存在未支付订单”，则跳转到订单待付款列表
    if (uni.getStorageSync('ObligationFun')){
      console.log('当前店铺存在未支付订单', that.tdsCurrent)
      that.tdsCurrent = uni.getStorageSync('ObligationFun')//待付款tabs的下标
      that.typs = 1 //待付款状态码
      that.orderList = []
      that.currentPage = 1
      that.GetOrderslist(that.typs)
    }else {
      that.typs = ops.types || "0" //订单类型
      that.GetOrderslist(that.typs)
      uni.$on('orderRef', (val) => {
        that.GetOrderslist(val)
      });
      let goodsImg = this.$refs;
      Object.keys(goodsImg).forEach((key, index) => {
        console.log('大图索引图片==',key)
      });
    }
    //获取顶部菜单menu_box高度
    uni.createSelectorQuery().select('.menu_box').boundingClientRect(rect => {
      that.menuHeight = rect.height
      console.log('导航栏高度==', that.menuHeight)
    }).exec();
  },
  onShow() {
    let that = this
    let token = uni.getStorageSync('token')
    if (!token) {
      that.orderList = []
    }
    that.currentPage = 1
    that.GetOrderslist()
    //设置顶部tabs索引为1, 页面加载刷新数据
    that.menuCurrent = 1
    that.menuTabs[0].active = true
    console.log('menuCurrent==', that.menuCurrent)
  },
  methods: {
    // menu菜单
    clickMenu(e){
      let that = this
      that.menuCurrent = e
      console.log('e', that.menuCurrent)
      that.menuTabs[0].active = false
      /* if (e == 1){
        that.orderList = []
        that.currentPage = 1
        that.Getorders()
      } else if (e == 2){
        that.gfOrderList = []
        that.currentPage = 1
        that.GetGfOrders()
      } */

    },
    // 调用子组件订单列表方法
    callChildMethod() {
      this.$refs.childRef.Getorders()
    },
    // 探店订单选择分类事件
    GetOrderslist(type) {
      let that = this
      if (type == 0) {
        that.tdsCurrent = 0 //全部
      } else if (type == 1) {
        that.tdsCurrent = 2 //待付款
      } else if (type == 10) {
        that.tdsCurrent = 1 //进行中
      } else if (type == 11) {
        that.tdsCurrent = 3 //已结束
      } else if (type == 5) {
        that.tdsCurrent = 4 //已完成
      }
      // 页面加载调用子组件的方法
      that.callChildMethod()
    },
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}

/deep/ scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.order_wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  /* menu菜单css */
  .menu_box  {
    display: flex;
    height: 80rpx;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    z-index: 10;
    .menu_list  {
      width: 27%;
      font-size: 32rpx;
      padding: 14rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .sanJiaoXing{
        width: 0;
        height: 0;
        border-left: 8rpx solid transparent;
        border-right: 0rpx solid transparent;
        border-bottom: 26rpx solid #FF7900;
        position: absolute;
        bottom: 0;
      }
      .icon-arrow-right{
        font-size: 24rpx;
        padding: 4rpx 6rpx;
        border-radius: 12rpx 12rpx 12rpx 0;
        color: #FFFFFF;
        background: #FF7900;
        margin-left: 8rpx;
        font-weight: normal;
      }
      .active_line{
        width: 100%;
        height: 8rpx;
        border-radius: 100rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #000000;
      }
    }
    .menu_list:last-child{
      width: 46%;
    }
    .menu_list_active{
      color: #FF7900;
    }

  }
  .order_box{
    flex: 1;
    height: 0;
  }


}

.order_list_wrap {
  padding: 30rpx;

  .order_list_item {
    margin-bottom: 30rpx;
    border-radius: 24rpx;
    padding: 24rpx;
    background-color: #ffffff;

    .order_title {
      align-items: center;
      justify-content: space-between;

      .shop_title {
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 6rpx;
        }

        text {
          color: $zzy-text-color-999999;
          font-size: 24rpx;
          -webkit-line-clamp: 1;
        }
      }

      .status {
        flex: 1;
        text-align: right;
        font-size: 24rpx;
        .color1 {
          color: #FF4E0D;
        }
        .color2 {
          color: #00AA3B;
        }
        .color3 {
          color: #999999;
        }
      }
    }

    .goods_info {
      align-items: flex-start;
      margin-bottom: 20rpx;
      .goods_img {
        width: 180rpx;
        height: 180rpx;
        position: relative;
        .gf_icon{
          width: 70rpx;
          text-align: center;
          padding: 0 6rpx;
          font-size: 24rpx;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10;
          border-radius: 12rpx 0 10rpx 0;
          background-color: #FECC32;
          color: #333333;
        }
        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 16rpx;
        }
      }

      .goods_name {
        padding-left: 16rpx;
        flex: 1;
        .shop_type {
          width: 70rpx;
          background-color: #FECC32;
          color: #333333;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
        }

        view:nth-child(1) {
          // font-weight: bold;
          color: $zzy-text-color-333333;
        }

        view:nth-child(2) {
          font-size: 24rpx;
          color: $zzy-text-color-666666;
        }

        view:nth-child(3) {
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: $zzy-text-color-666666;
          flex: 1;

          span {
            color: $zzy-text-color-333333;
            font-size: 28rpx;
          }
        }
      }
    }
    // 必看
    .mustSee{
      position: absolute;
      bottom: 30rpx;
      right: -20rpx;
      z-index: 5;
      padding: 5rpx 13rpx;
      color: #FFFFFF;
      font-size: 12rpx;
      border-radius: 16rpx 16rpx 16rpx 0;
      background: linear-gradient(to right, #fc8635 0%, #ec1e2c 100%);
    }
    .bohui_yin {
      border-radius: 16rpx;
      padding: 20rpx;
      background-color: #FCF0ED;
      margin-bottom: 24rpx;
      align-items: flex-start;

      view:nth-child(1) {
        color: #FF4E0D;
      }

      view:nth-child(2) {
        color: $zzy-text-color-666666;
        flex: 1;
      }
    }

    .order_btnzu {
      align-items: center;
      justify-content: space-between;

      .lxkf {
        flex: 1;
        align-items: center;
        color: $zzy-text-color-333333;
        font-size: 24rpx;
      }

      .lxkefu {
        font-size: 24rpx;

        /deep/ button {
          background-color: transparent !important;
          padding: 0 !important;
          margin: 0 !important;
          line-height: 40rpx !important;
          height: 40rpx;
          font-size: 24rpx !important;
          color: #333333 !important;
        }

        /deep/ button::after {
          border: none !important;
        }
      }

      .right_zu {
        .kongxin {
          border-radius: 200rpx;
          width: 144rpx;
          height: 56rpx;
          line-height: 56rpx;
          border: 1px solid #d9d9d9;
          color: $zzy-text-color-333333;
          text-align: center;
          font-size: 24rpx;
        }

        .shise {
          background-color: #FF7900;
          border-radius: 200rpx;
          width: 144rpx;
          height: 56rpx;
          line-height: 56rpx;
          border: 1px solid #FF7900;
          color: #ffffff;
          text-align: center;
          font-size: 24rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}

.tc_wrap {
  background: linear-gradient(179deg, #FFF2EA 0%, #FFE5E4 5%, #fdf8f8 20%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);;
  padding: 30rpx;
  text-align: center;

  .guanyu_title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .wenan {
    color: #999;
    margin-bottom: 20rpx;
  }

  .tc_images {
    width: 520rpx;
    height: 236rpx;
    position: relative;

    image {
      width: 520rpx;
      height: 236rpx;
    }
  }

  .steup_info {
    text-align: left;
    margin-top: 30rpx;

    .yqoiu {
      view:nth-child(1) {
        color: #666;
      }
    }

    .yqoiu2 {
      color: #666;

      span {
        color: #FE7B20;
      }
    }
  }

  .tc_info {
    view:nth-child(1) {
      font-weight: bold;
      font-size: 32rpx;
      margin-bottom: 20rpx;
    }

    view:nth-child(2) {
      font-size: 28rpx;
      color: #999;

      span {
        color: #FF4E0D;
      }
    }

    .gif_tu {
      width: 100%;
      height: 528rpx;
      border-radius: 20rpx;
    }
  }

  .tc_btn_box {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    justify-content: center;

    .tc_btn_huise {
      flex: 1;
      margin-right: 12rpx;
      background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
      color: #333333;
    }

    .tc_btn_huise_err {
      flex: 1;
      background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
      color: #fff;
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
    }

    .lijipay1 {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 20rpx 0 0;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
        color: #333;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }

    .lijipay {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 auto;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background-image: linear-gradient(to right, #F18F2C, #FF7A00) !important;
        color: #fff;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }
  }
}
//  支付取消原因css
.cancel-payment {
  padding: 0 34rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  .cancel-payment-top {
    height: 160rpx;
    .cancel-payment-title {
      font-size: 32rpx;
      font-weight: bold;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #3D3D3D;
    }
    .cancel-payment-head {
      font-size: 28rpx;
      color: #888888;
      padding: 20rpx 0;
    }
  }
  .cancel-payment-content {
    height: 0;
    flex: 1;
    .u-radio{
      width: 100% !important;
      display: flex;
      justify-content: space-between;
      padding: 16rpx 0;
      .u-radio__icon-wrap {
        margin-right: 50rpx;
      }
      .u-radio__label {
        font-size: 28rpx;
        color: #3D3D3D;
        order: -1;
      }
    }
  }
  .cancel-payment-bottom {
    padding: 20rpx 0;
    .cancel-payment-btn {
      width: 90%;
      line-height: 80rpx;
      margin: 0 auto;
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
    }
  }
}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  height: calc(100vh);
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding-top: 100rpx;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
    }
    .loading_gif {
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>